<template>
	<view class="itemBox" :class="{pur_all: identity_type === 3}">

		<!--用户头像模板组件-->
		<template v-if="!isOrder">
			<UserByList2 @userPage="$emit('userPage',item)" :item="item" :type="type"
				@communicates="$emit('communicates',item)"></UserByList2>
		</template>

		<!--置顶图标-->
		<view class="toppingByList" v-if="item.is_topping == '2'">
			<u-icon name="arrow-upward"></u-icon>
		</view>

		<slot name="orderStatus"></slot>
		<slot name="list"></slot>



		<!--推广列表-->
		<template v-if="type == 1">
			<view class="flex u-margin-top-20">
				<view class="productImg">
					<block
						v-if="((item.logo)&&(item.logo!=0)&&(item.logo!='0')&&(item.logo!=null)&&(item.logo!=undefined)&&(item.logo!='undefined'))">
						<image class="img" mode="aspectFill" :src="toImages(item.logo)">
						</image>
					</block>
					<block v-else>
						<image class="img" mode="aspectFill" v-if="i" v-for="(i,j) in storeImages(1, item.buy_images)"
							:key="j" :src="toImages(i)">
						</image>
					</block>
				</view>

				<view @click="details(item)" style="flex: 1;">
					<view class="lineP">
						<view class="title u-line-2">{{item[$t('item.name')] || $t("暂无信息")}}</view>
					</view>

					<view class="lineP  u-margin-top-20">
						<view class="label   u-font-24" style="display: flex;">
							<div class="icon">
								<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
									:src="HTTP_IMG_UTL+'transportIcon1.png'"> </image>
							</div>
							<view>
								<view>
									{{$t("货源地")}}
								</view>
								<block v-if="item.hwdd">
									<view class="text u-line-2 u-font-24"
										style="height: auto;word-break: break-word;color:#3d3d3d;font-size:24rpx">
										{{ replaceSpaceWithComma(item.hwdd) || $t("暂无信息")}}
									</view>
								</block>
								<block v-else>
									<view v-if="lang=='zh'" class="text u-line-2 u-font-24"
										style="height: auto;word-break: break-word;color:#3d3d3d;font-size:22rpx">
										{{ replaceSpaceWithComma(item.reach_city.mergename)|| $t("暂无信息") }}
									</view>
									<view v-if="lang!='zh'" class="text u-line-2 u-font-24"
										style="height: auto;word-break: break-word;color:#3d3d3d;font-size:22rpx">
										{{ replaceSpaceWithComma(item.reach_city.mergename_ru)|| $t("暂无信息") }}
									</view>
								</block>
							</view>
						</view>

					</view>

					<view class="lineP" style="align-items: center;display: none;">
						<view class="block">
							{{ item[$t('item.goods_num')] || '' }}
						</view>
						<view class="u-font-32">{{ item[$t('item.number_unit')]}}</view>
					</view>

					<view class="lineP title_red u-font-34" style="justify-content: flex-end;align-items: baseline;">
						<view style="width: 40%;">
							<image :src="toImages('/uploads/20240514/2910b0256c8740723c7527820a5339d0.png')"
								style="width: 40rpx;height: 20rpx;"></image>
							<text
								style="color: #999999;height: 30rpx;line-height: 30rpx;font-size: 24rpx; ">{{ item[$t('view_count')]}}</text>
						</view>

						<view v-if="lang==='zh'" style="width: 60%; text-align: right; ">
							{{ item[$t('desire_price')]}}
							<text class="small u-font-28 u-margin-left-10">
								{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
							</text>
						</view>
						<view v-if="lang !='zh'" style="width: 60%; font-size: 28rpx; text-align: right; ">
							{{ item[$t('desire_price')]}}
							<text class="small u-margin-left-10" style="font-size: 20rpx;">
								{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
							</text>
						</view>
					</view>

				</view>
			</view>
		</template>


		<!--竞标列表-->
		<template v-if="type == 2">
			<view class="flex u-margin-top-20">

				<view class="productImg">
					<block
						v-if="((item.logo)&&(item.logo!=0)&&(item.logo!='0')&&(item.logo!=null)&&(item.logo!=undefined)&&(item.logo!='undefined'))">
						<image class="img" mode="aspectFill" :src="toImages(item.logo)">
						</image>
					</block>
					<block v-else>
						<image class="img" mode="aspectFill" v-if="i" v-for="(i,j) in storeImages(1, item.buy_images)"
							:key="j" :src="toImages(i)">
						</image>
					</block>

					<block v-if="lang==='zh'">
						<view v-if="((item.logo)||(item.buy_images.length!=0))" class="tips">
							{{ identity_type === 3 ? $t('求购') : $t('正在求购该商品') }}
						</view>
					</block>
					<block v-if="lang!='zh'">
						<view v-if="((item.logo)||(item.buy_images.length!=0))" style="font-size: 16rpx;" class="tips">
							{{$t('正在求购该商品')}}
						</view>
					</block>
				</view>

				<view @click="details(item)" style="flex: 1;">

					<view class="lineP">
						<view class="title u-line-2">{{item[$t('item.name')] || $t("暂无信息")}}</view>
					</view>

					<view class="lineP  u-margin-top-20 flex" style="justify-content:flex-start">
						<view class="label title_red u-font-24 flex">
							<div class="icon">
								<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;"
									:src="HTTP_IMG_UTL+'transportIcon1.png'"> </image>
							</div>
						</view>
						<view>
							<view style="color:#3d3d3d;font-size:22rpx">{{$t("目的地")}}</view>
							<block v-if="item.hwdd">
								<view class="text u-line-2 u-font-24"
									style="height: auto;word-break: break-word;color:#3d3d3d;font-size:24rpx">
									{{ replaceSpaceWithComma(item.hwdd) || $t("暂无信息") }}
								</view>
							</block>
							<block v-else>
								<view v-if="lang=='zh'" class="text u-line-2 u-font-24"
									style="height: auto;word-break: break-word;color:#3d3d3d;font-size:24rpx">
									{{ replaceSpaceWithComma(item.reach_city.mergename)|| $t("暂无信息") }}
								</view>
								<view v-if="lang!='zh'" class="text u-line-2 u-font-24"
									style="height: auto;word-break: break-word;color:#3d3d3d;font-size:24rpx">
									{{ replaceSpaceWithComma(item.reach_city.mergename_ru)|| $t("暂无信息") }}
								</view>
							</block>
						</view>

					</view>

					<view class="lineP" style="align-items: center;display: none;">
						<view class="block">
							{{ item[$t('item.goods_num')] || '' }}
						</view>
						<view class="u-font-32">{{ item[$t('item.number_unit')]}}</view>
					</view>

					<block v-if="lang==='zh'">
						<view class="lineP title_red u-font-30 line_01">
							<view class="line_01_left">
								<text class="left_01_text">
									{{$t('需求量')}}: {{ item[$t('goods_num')]}} {{ item[$t('item.number_unit')]}}
								</text>
							</view>
							<view class="line_01_right" v-if="item[$t('desire_price')]>0">
								{{ item[$t('desire_price')]}}
								<text class="small u-font-20 u-margin-left-10">
									{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
								</text>
							</view>
							<view class="line_01_right" v-else>
								<text class="small u-font-20 u-margin-left-10" v-if="lang=='zh'">
									等待报价
								</text>
								<text class="small u-font-20 u-margin-left-10" v-if="lang!='zh'">
									Ждем предложения
								</text>
							</view>
						</view>
					</block>

					<block v-if="lang!='zh'">
						<view class="lineP title_red u-font-20 line_01">
							<view class="line_02_left">
								<text class="left_02_text">
									{{$t('需求量')}}: {{ item[$t('goods_num_ru')]}} {{ item[$t('item.number_unit')]}}
								</text>
							</view>
							<view class="line_02_right">
								{{ item[$t('desire_price')]}}
								<text class="small u-font-20 u-margin-left-10">
									{{$t(item.price_unit)}}/{{ item[$t('item.number_unit')]}}
								</text>
							</view>
						</view>
					</block>

				</view>
			</view>
			<block v-if="(identity_type === 3 || identity_type === 0) && status == '0'">
				<view class="purchase_wrap">
					<view class="pur_left">
						<view class="item_top">
							<text class="name">{{$t('浏览')}}:</text>
							<text class="value">{{item.view_count || 0}}</text>
						</view>
						<view class="item_top item_bottom">
							<text class="name">{{$t('推送')}}:</text>
							<text class="value">{{push_count || 0}} {{$t('家供应商')}}</text>
						</view>
					</view>
					<view class="pur_right">
						<view class="text">
							<text class="name">{{$t('竞标')}}:</text>
							<text class="value">{{jb_count || 0}}{{$t('家')}}</text>
						</view>

					</view>
				</view>
			</block>


		</template>

		<slot name="flag"></slot>



		<!--时间与按钮-->
		<view class="bidding_address" style="padding-left: 0rpx; padding-right: 0rpx;">
			<view class="bidding_ares">
				<view class="bidding_time" style="display: none;">
					<text style="line-height: 50rpx;">{{ time("S", item.createtime) }}</text>
				</view>
			</view>
			<view class="bidding_btn" @click.stop="$emit('communicate',item,1,type)" v-if="!isOrder"
				style="width:250rpx; margin-top: 10rpx; margin-left:10rpx; margin-right: 10rpx;">
				<text class="btnStyle" style="background: linear-gradient(110deg, #f772d1 0%, #c872f2 100%);">
					{{ type == 1 ? $t(tg) : $t(jb) }}
				</text>
			</view>
			<view class="bidding_btn" style="margin-top: 10rpx;width:250rpx; "
				@click.stop="$emit('communicate',item,0,type)" v-if="!isOrder">
				<text class="btnStyle">
					{{ type == 1 ? $t('即时联系') : $t('即时联系') }}
				</text>
			</view>
		</view>

		<slot name="btns"></slot>
		<slot name="bottom"></slot>

	</view>
</template>

<script>
	import FromToCountry from '@/components/FromToCountry.vue'
	import Tag from '@/components/Tag.vue'
	import {
		IMAGE_URL,
		HTTP_IMG_UTL
	} from "@/config/app";
	import UserByList2 from '@/components/UserByList2.vue'
	export default {
		components: {
			FromToCountry,
			Tag,
			UserByList2
		},
		props: {
			item: {
				type: [Array, Object],
				default: {},
			},
			type: {
				type: String | Number,
				default: '1',
			},
			isOrder: {
				type: [Boolean, Number],
				default: false,
			},
			orderDetail: {
				type: [Array, Object, null],
				default: {},
			},
			orderjoin: {
				type: [Array, Object, null],
				default: {},
			},
			identity_type: {
				type: String | Number,
				default: '',
			},
			status: {
				type: String | Number,
				default: 0,
			},
			push_count: {
				type: String | Number,
				default: 0,
			},
			jb_count: {
				type: String | Number,
				default: 0,
			}
		},
		computed: {
			toImages() {
				return (src) => {
					if (src.url != undefined) {
						return (this.isOrder ? src.url : IMAGE_URL + src)
					} else {
						src = src.replace(/'+IMAGE_URL+'/g, '');
						return IMAGE_URL + src
					}
				}
			},
			storeImages() {
				return (sum, images) => {
					return (images && images.length > 0) ? [images[0]] : images
				}
			},
		},
		data() {
			return {
				HTTP_IMG_UTL,
				lang: getApp().globalData.lang,

				tg: '发起求购',
				jb: '参与订单',


			};
		},
		created() {
			console.log("item====", this.item)
		},
		methods: {
			time(type = "MS", date1, str = "year") {
				if (type === "S") date1 = date1 * 1000 //秒
				let year = new Date(date1).getFullYear();
				let month = (new Date(date1).getMonth() + 1) > 9 ? (new Date(date1).getMonth() + 1) : '0' + (new Date(
						date1)
					.getMonth() + 1);
				let date = new Date(date1).getDate() > 9 ? new Date(date1).getDate() : '0' + new Date(date1).getDate();
				let hours = new Date(date1).getHours() > 9 ? new Date(date1).getHours() : '0' + new Date(date1).getHours();
				let minutes = new Date(date1).getMinutes() > 9 ? new Date(date1).getMinutes() : '0' + new Date(date1)
					.getMinutes();
				let seconds = new Date(date1).getSeconds() > 9 ? new Date(date1).getSeconds() : '0' + new Date(date1)
					.getSeconds();
				if (str === "year") {
					// return `${year}` + app.$i18n.t('年') + `${month}` + app.$i18n.t('月') + `${date}` + app.$i18n.t('日') + `${hours}:${minutes}:${seconds}`
					return `${year}.${month}.${date} ${hours}:${minutes}:${seconds}`
				}
				if (str === "date") {
					return `${year + `-` + month + `-` + date}`
				}
				return `${year + str + month + str + date} ${hours}:${minutes}:${seconds}`
			},
			replaceSpaceWithComma(str) { //过滤横杠为逗号 清除两端逗号
				if (str) {
					str = str.replace(/-/g, ',');
					str = str.replace(/^[,]+|[,]+$/g, '');
					return str;
				} else {
					return str;
				}
			},

			//详情
			details(i) {

				if (this.orderDetail) {
					if (JSON.stringify(this.orderDetail) == '{}') {
						this.$u.route({
							url: "/pages/index/detail/detail",
							params: {
								id: i.id,
								// type: this.current + 1,
								type: i.type,
								releaseType: 'goods',
								join_order_id: this.orderjoin.id,
							}
						})
					} else {
						this.$u.route({
							url: "/pages/ordering/orderDetail",
							params: {
								id: this.orderDetail.id,
								join_order_id: this.orderDetail.join_order_id,
							}
						})
					}
				} else {
					this.$u.route({
						url: "/pages/index/detail/detail",
						params: {
							id: i.id,
							// type: this.current + 1,
							type: i.type,
							releaseType: 'goods'
						}
					})
				}

			},
		},
		mounted() {
			if (uni.getStorageSync('off') == false) {
				this.tg = '发起求购'
				this.jb = '参与订单'
			} else {
				this.tg = '招标比价'
				this.jb = '参与竞标'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.icon {
		flex-shrink: 0;
		height: 64rpx;
		width: 64rpx;
		background-color: #F5F4F9;
		border-radius: 8rpx;
		margin-right: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tips {
		z-index: 99;
		width: 100%;
		border-bottom-right-radius: 20rpx;
		border-bottom-left-radius: 20rpx;
		line-height: 40rpx;
		height: 40rpx;
		bottom: 10rpx;
		left: 0;
		font-size: 24rpx;
		position: absolute;
		text-align: center;
		color: #fff !important;
		background-image: linear-gradient(to bottom, #ff0f47, #ffab96) !important;
	}

	.itemBox {
		margin: 0 auto;
		background: #ddd;
		padding: 8px;
		border-radius: 20rpx;
		background: #fff;
		margin-bottom: 20rpx;
		position: relative;

		&.yellow {
			background: #fefcf6;
		}

		.title_red {
			font-weight: 600;
			color: #e33a13;
		}

		.priceBox {
			background: linear-gradient(90deg, #fe4e31, #ffcd84);
			border-radius: 20rpx;
			padding: 15rpx 30rpx;
			color: #fff;
			font-size: 50rpx;
			padding-top: 40rpx;
			margin-top: -60rpx;
			margin-bottom: 10rpx;

			.small {
				margin-left: 10rpx;
				font-size: 30rpx;
			}

			&.jingpai {
				background: linear-gradient(-90deg, #fe4e31, #ffcd84);
				text-align: right;
			}
		}

		.lineP {
			margin: 0 auto;
			margin-bottom: 10rpx;
			display: flex;
			width: 90%;

			&.line_01 {
				justify-content: flex-end;
				align-items: baseline;

				.line_01_left {
					width: 42%;

					.left_01_text {
						color: #3d3d3d;
						height: 30rpx;
						line-height: 30rpx;
						font-size: 24rpx;
					}
				}

				.left_02_text {
					color: #999999;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 16rpx;
				}

				.line_01_right {
					width: 58%;
					text-align: right;
				}

				.line_02_left {
					width: 45%;
				}

				.line_02_right {
					width: 55%;
					text-align: right;
				}
			}

			.block {
				border-radius: 10rpx;
				border: 1px solid #666;
				padding: 10rpx 6rpx;
				margin-right: 15rpx;
				width: 80rpx;
				text-align: center;
			}

			.label {
				// flex: 1;
			}

			.text {
				// margin-top: 10rpx;
				// flex: 1;
				// margin-left: 20rpx;
				overflow: hidden;
				// white-space: nowrap;
				text-overflow: ellipsis;
			}



			.price {
				font-size: 50rpx;
				font-weight: normal;

				.small {
					font-size: 24rpx;
				}
			}
		}

		.xiaorenBox {
			// position: absolute;
			// bottom: 80rpx;
			// transform: rotate(180deg, 180deg);

			.xiaoren {
				width: 220rpx;
				height: 100rpx;
				position: relative;
				// top: 90rpx;
			}
		}

		.flex {
			display: flex;
			justify-content: space-between;

			.flexClum {
				display: flex;
				flex-direction: column;
				align-content: center;
				align-items: flex-start;
				justify-content: center;

				&.jingpai {
					align-content: baseline;
					justify-content: flex-end;
					flex-wrap: wrap;
					align-items: flex-start;
					flex-direction: row;
				}


				.xiaoren {
					width: 220rpx;
					height: 100rpx;
					position: relative;
					top: 90rpx;
				}
			}
		}

		.productImg {
			position: relative;
			margin-right: 20rpx;

			.img {
				width: 250rpx;
				height: 250rpx;
				overflow: hidden;
				border-radius: 20rpx;
				// box-shadow: 0 0 20rpx #ddd;
			}
		}

		//地址信息
		.bidding_address {
			padding: 13.6rpx $my-padding-20 10rpx $my-padding-20;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			font-size: $my-font-size21;
			font-weight: 400;
			color: #888888;
			line-height: 30rpx;

			.bidding_ares {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;

				.bidding_ares1 {
					display: flex;
					justify-content: flex-start;

					image {
						width: 24.42rpx;
						height: 31.4rpx;
					}
				}
			}
		}

		.bidding_betwn {
			display: flex;
			// justify-content: space-between;
			align-items: flex-end;

			.chat {
				transform: translateY(0rpx);
			}

			.userName {
				min-height: 50rpx;

				.bidding_user_text {
					display: block;
					padding-left: 0;
				}

				.country_icon {
					padding-left: 0;
				}
			}

			.flex {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}


			.bidding_user {
				display: flex;
				flex-direction: row;
				align-items: center;
				// padding: $my-padding-20;
				margin-right: 10rpx;


				//头像大小
				.bidding_user_image {
					padding-left: $my-padding-10;
					height: 50rpx;
					width: 50rpx
				}

				//用户图标
				.bidding_user_icon {
					padding-left: $my-padding-10;
					height: 35rpx;
					width: 35rpx;
				}
			}
		}

		.title {
			// color: #e43b14;
			font-size: 30rpx;
			// border-bottom: 1rpx solid #cccccc;
			font-weight: 600;
			// padding-bottom: 50rpx;
			margin-bottom: 10rpx;
			word-break: break-word;
			// height: 80rpx;
			// padding-left: 28rpx;

			&.none-border-bottom {
				border-bottom: none;
			}
		}

		.type {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-left: 10rpx;
			padding-right: 22rpx;
			// width: 90%;
			// margin: 0 auto;
		}

		.address {
			margin-bottom: 32rpx;
			font-size: 30rpx;
			position: relative;
			padding-left: 45rpx;
			// font-weight: 600;

			// .warp {
			// 	width: 55%;
			// }

			.headline_img {
				position: absolute;
				left: 0;
				top: 4rpx;
				width: 30rpx;
				height: 30rpx;
			}

			.label {
				font-weight: 600;
				margin-bottom: 10rpx;
			}
		}
	}

	@keyframes btnone {
		0 {
			background-position: 100%;
		}

		100% {
			background-position: 0%;
		}
	}


	// 2024/11/15 新增
	.purchase_wrap {
		display: flex;
		width: 100%;
		margin-top: 24rpx;
		align-items: stretch;

		.pur_left {
			flex: 1;
			margin-right: 15rpx;
			display: inline-flex;
			flex-direction: column;
			justify-content: space-between;

			.item_top {
				min-height: 40rpx;
				line-height: 40rpx;
				border-radius: 10rpx;
				text-align: center;
				color: #fff;
				background-image: linear-gradient(270deg, #CCE7F9 0%, #5282E6 33%, #CCE7F9 66%, #5282E6 100%);
				background-position: 100%;
				animation: btnone 4s linear infinite;
				background-size: 300% 100%;
				margin-bottom: 10rpx;

				&.item_bottom {
					margin-bottom: 0;
					display: inline-flex;
					align-items: center;
					justify-content: center;
					animation: btnone 4.5s linear infinite;

					.value {
						line-height: 1.1;
					}
				}
			}

			.name {
				font-size: 16rpx;
				margin-right: 5rpx;
			}

			.value {
				font-size: 22rpx;
				font-weight: bold;
			}
		}

		.pur_right {
			flex: 1;
			min-height: 90rpx;
			border-radius: 12rpx;
			background: #F6F7FB;
			display: inline-flex;
			align-items: center;
			justify-content: center;

			.text {
				// background: linear-gradient(180deg, #30F998 0%, #0D7DE2 98%);
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
				// background-clip: text;
				// text-fill-color: transparent;
				color: #3484C3;

				.name {
					font-size: 24rpx;
					margin-right: 5rpx;
				}

				.value {
					font-size: 30rpx;
				}
			}
		}

	}

	.pur_all {
		.tips {
			bottom: auto;
			top: 0;
			border-radius: 24rpx 0 24rpx 0;
			width: auto;
			padding: 0 40rpx;
			min-width: 120rpx;
			font-size: 18rpx;
			background-image: linear-gradient(270deg, #CCE7F9 0%, #5282E6 100%) !important;
		}

		.title_red {
			font-weight: 400;

			.u-font-20 {
				font-size: 24rpx;
			}
		}

		.lineP {
			width: 100%;

			&.line_01 {
				margin-top: 20rpx;
				justify-content: space-between;
				align-items: center;

				.line_01_left {
					flex: 1;
					width: auto;
				}

				.line_01_right {
					width: auto;
					flex: none;
				}

				.line_02_left {
					flex: 1;
					width: auto;
				}

				.line_02_right {
					width: auto;
					flex: none;
				}

				.left_02_text {
					font-size: 24rpx;
				}
			}
		}
	}
</style>